<template>
  <div class="home">
    <table-component
      :tableData="tableData" 
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleSelectionChange="handleSelectionChange"
    ></table-component>

    <el-button>批量删除</el-button>

    <page-component
      :currentPage="currentPage"
      :size="size"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      :total="total"
    ></page-component>
  </div>
</template>

<script>
import PageComponent from "@/components/basePage";
import TableComponent from "@/components/baseTable";
import { pageFn } from "../api/api";
export default {
  name: "Home",
  data() {
    return {
      currentPage: 1,
      size: 5,
      total: 0,
      tableData: [
        {
          id: 0,
          username: "devin",
          gender: "nan",
          age: "10",
          birthday: "2020",
          address: "address"
        }
      ]
    };
  },
  components: {
    PageComponent,
    TableComponent
  },
  mounted() {
    this.getPageData({});
  },
  methods: {
    async getPageData({ page = 0, size = this.size }) {
      let data = await pageFn({ page, size: this.size });
      this.total = data.data.total;
      this.tableData = data.data.data;
    },
    // 批量删除的数据获取函数
    handleSelectionChange(arr) {
      console.log("fu: ", arr);
    },
    sizeChange(val) {
      // 每次点击切换每一页显示多少条的时候，更新size
      this.size = val;
      // 同时更新让当前的数据。从第一页开始显示
      this.currentPage = 1;
      // 调用分页数据请求
      this.getPageData({});
    },
    currentChange(val) {
      // 点击每个按钮，记录当前点击的页码
      this.currentPage = val;
      // 分页参数
      const opt = {
        page: val - 1,
        size: this.size
      };
      this.getPageData({ ...opt });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>
